<template>
  <div>
    <button @click="currentComponent = 'ComponentA'">显示 ComponentA</button>
    <button @click="currentComponent = 'ComponentB'">显示 ComponentB</button>
    <button @click="currentComponent = 'ComponentC'">显示 ComponentC</button>

    <!-- 使用动态组件 -->
    <h2>使用动态组件</h2>
    <component :is="currentComponent"></component>
    <!-- 使用keep-live 会缓存组件
    include - 字符串或正则表达式或数组。只有名称匹配的组件会被缓存。
    exclude - 字符串或正则表达式或数组。任何名称匹配的组件都不会被缓存。
    max - 数字。最多可以缓存多少组件实例
     -->
    <!-- API地址https://v2.cn.vuejs.org/v2/api/#keep-alive -->
    <h2>使用keep-live</h2>
    <keep-alive :exclude="['ComponentA']">
      <component :is="currentComponent"> </component>
    </keep-alive>

    <h2>使用异步组件</h2>
    <!-- 异步组件需要在components里面引入，相当于懒加载，需要的时候再加载他，刷新时候会有明显的刷新效果，这是因为懒加载，需要再加载，引入：componentD: () => import('./componentD.vue') -->
    <button @click="show = true">显示异步组件</button>
    <componentD v-if="show"></componentD>
  </div>
</template>

<script>
import componentA from './componentA.vue'
import componentB from './componentB.vue'
import componentC from './componentC.vue'
// import errorcomponent from './ErrorComponent.vue'
// // import ladingcomponent from './LoadingComponent.vue'
export default {
  name: '',
  components: {
    componentA,
    componentB,
    componentC,
    componentD: () => import('./componentD.vue')
    // errorcomponent,
    // ladingcomponent
  },
  data() {
    return {
      currentComponent: 'ComponentA', //默认显示 ComponentA
      show: false
    }
  }
}
</script>

<style lang="scss" scoped></style>
